setPage();
//通过事件委托添加点击事件  

$('.container').click(function(e){
  //获取cart数据
  const cart = JSON.parse( localStorage.cart );
  console.log(cart);
  //全选按钮处
  if (e.target.getAttribute('name')=== 'all') {
    
    cart.forEach(item => {
      item.buy=e.target.checked;
    });
  }else if (e.target.getAttribute('name')=== 'other') {
    cart[e.target.getAttribute('index')-0].buy=e.target.checked;
  }else if (e.target.getAttribute('name') === 'del') {
    cart.splice(e.target.getAttribute('index')-0,1);


}else if (e.target.getAttribute('name') === '减') {
  cart[e.target.getAttribute('index')-0].num--;
}else if (e.target.getAttribute('name') === '加') {
  cart[e.target.getAttribute('index')-0].num++;
}
localStorage.cart=JSON.stringify(cart);
setPage();
});

function setPage(){
  let type = 0;
  let number =0;
  let money = 0;
  let cart =localStorage.cart;
  if (cart === undefined) {
    $('.container').html('<h1>您还没有创建购物车,请您先去创建</h1>');
  }else{
    let bool=true;
    cart=JSON.parse(cart);
    if (cart.length === 0) {
      $('.container').html('<h2>宝~  购物车是空的~</h2>');
    }else{
      //头部部分
      let str =`
      <div class="panel panel-info ">
    <div class="panel-body bg-info">
      <div class="checkbox">
        <label>
          <input name="all" type="checkbox" value="">
          全选
        </label>
      </div>
    </div>
    <div class="panel-footer">
      <ul class="cart-list">
      `;
      //中间部分
      cart.forEach(function(item,key){
        if (item.buy === false) {
          bool = false;
        }else{
          //商品的种类 有选中就是1类
          type++;
          number+=item.num;
          money+=item.goods_price*item.num;
        }
        str+=`
        <li class="cart-item">
          <div class="left">
            <input name="other" index="${key}" type="checkbox" ${item.buy ? 'checked' : ''}>
          </div>
          <div class="right">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="${item.goods_small_logo}" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">${item.goods_name}</h4>
                <p>
                  <i class="glyphicon glyphicon-yen"></i>
                  <span>${item.goods_price}</span>
                </p>
                <div class="btn-group pull-right" role="group" aria-label="...">
                  <button name="减"  index="${key}" type="button" class="btn btn-default" ${item.num === 1? 'disabled': ''} >-</button>
                  <button index="${key}" name="num" type="button" class="btn btn-default" disabled>${item.num}</button>
                  <button name="加" type="button" index="${key}" class="btn btn-default" ${item.num === item.goods_number ? 'disabled': ''}>+</button>
                </div>
                <button index="${key}" name="del" class="del btn btn-danger">我不要了</button>

              </div>
            </div>
          </div>
        </li>
        

        
        `
        



      })
      //结束部分
      str+=`
          </ul>
          </div>
          <div class="footer">
            <h2>选中${type}种商品</h2>
            <h2>一共${number}件商品</h2>
            <h2>共计${money.toFixed(2)}元</h2>
            
            
          </div>
        </div>
    </div>
      `
      $('.container').html(str);
      $('[name="all"]').prop('checked' , bool);    

    }
  }
}

